<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏元素的方式</title>
  <style>
    div{
      background-color: red;
      min-width: 400px;
      min-height: 400px;

    }
    span{
      display: inline-block;
      width: 1000px;
      background-color: yellow;
    }
  </style>
</head>
<body>
<!--
方式一:visibility属性
  visibility属性默认值是show,如果设置成hidden,元素会被隐藏
  元素看不见了,但是还是占有原来的位置(元素大小依然保持)
方式二:display属性
  display属性设置成none,就可以让元素隐藏
  彻底的隐藏,不但看不见,也不占用任何位置,没有大小宽高
-->
</body>
<div style="visibility: hidden;">
  元素占位置,被隐藏
</div>
<span>元素不隐藏</span>
<div style="display: none;">
  元素不占位置被隐藏
</div>
<span>元素不隐藏</span>
</html>